import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
import {
  RedLabel,
  HotLabel,
  NormalLabel,
  TriangleType,
} from 'bee/components/Sales';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';

// @flow
type Props = {
  onPress: Function,
  data: object,
};

class ProductItem extends Component<Props> {
  render() {
    const { title, desc, labels, type } = this.props.data;

    return (
      <TouchableWithoutFeedback onPress={this.props.onPress}>
        <View style={styles.box}>
          <TriangleType title={type} />
          <Text style={styles.image} />
          <View style={styles.contentContainer}>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.brief}>{desc}</Text>

            <View style={styles.labels}>
              {labels.map(label => {
                switch (label.type) {
                  case '0':
                    return <RedLabel title={label.text} />;
                  case '1':
                    return <HotLabel title={label.text} />;
                  default:
                    return <NormalLabel title={label.text} />;
                }
              })}
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    height: px2dp(300),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: px2dp(30),
    paddingRight: px2dp(53),
    backgroundColor: colors.white,
  },
  image: {
    width: px2dp(240),
    height: px2dp(240),
    backgroundColor: '#ace',
  },
  contentContainer: {
    flex: 1,
    marginLeft: px2dp(22),
    justifyContent: 'space-between',
  },
  title: {
    color: colors[1101],
    fontSize: sizes.f3,
  },
  brief: {
    color: colors[1102],
    fontSize: sizes.f2,
    marginTop: px2dp(16),
  },
  labels: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

export default ProductItem;
